<template>
    <div>
        <van-cell   :title="commentcon.aut_name" title-style="color:rgb(165,168,181);font-size:.4rem">
            <template #icon >
                <van-image
                    round
                    width="35"
                    height="35"
                    style="margin-right:.2rem"
                    :src="commentcon.aut_photo"
                />
            </template>
            <template tag='div' #right-icon v-if="comitemtype==='default'">
                <span style="font-size:.35rem;verticle-align:middle;margin-right:.2rem"> {{commentcon.like_count}}</span>   
                <van-icon :name="commentcon.is_liking?'like':'like-o'" :color="commentcon.is_liking?'rgb(252,102,39)':'rgb(131,129,143)'" class="search-icon" @click="likecomment(commentcon.com_id)" />
            </template>
            <template tag='div' #right-icon v-else>
                <focusBtn :detaile='commentcon' />
            </template>
            <template #label >
                <span v-text="commentcon.content" class="comcontent"></span>
                <p class="cominfo">
                    <span >{{commentcon.pubdate | latetime}}</span>
                    
                    <van-button v-if="replytype=='art'" @click="showreply" v-show="comitemtype=='default'" type="default" size="mini"  style="padding:.1rem .2rem;box-sizing:border-box;vertical-align: middle;margin-left:.3rem"  round>
                        回复{{commentcon.reply_count}}
                    </van-button>
                    <van-button v-else-if="replytype=='comreply'" @click="showpub" v-show="comitemtype=='default'" type="default" size="mini"  style="padding:.1rem .2rem;box-sizing:border-box;vertical-align: middle;margin-left:.3rem"  round>
                        回复
                    </van-button>
                </p>
            </template>
            
        </van-cell>
    </div>
</template>

<script>
import {commentlikings,commentdellikings} from '@/api/article'
import focusBtn from '@/components/focusbtn'
export default {
    mame:'CommentItem',
    components: {focusBtn},
    props: {
        commentcon:{
            required:true,
            type:Object
        },
        //区分reply弹窗中的 该文章评论item 和 该文章评论-回复列表item信息
        comitemtype:{
            type:String,
            default:'default'
        },
        replytype:{type:String,default:'art'}
    },
    data() {
        return {
        };
    },
    watch: {},
    computed: {},
    methods: {
        async likecomment(com_id){
            try{
                if(!this.commentcon.is_liking){
                    const {data}=await commentlikings({target:com_id})  
                    if(data.message=='OK'){
                        this.$toast('点赞成功')
                    }else{
                        this.$toast('点赞失败')
                    }
                    this.commentcon.like_count+=1
                }else{
                    const data=await commentdellikings(com_id)  
                    this.commentcon.like_count-=1
                    this.$toast('取消点赞')
                }
                this.commentcon.is_liking=!this.commentcon.is_liking
            }catch(err){
                this.$toast('操作失败')
                console.log(err,'错误')
            }
        },
        showreply(){
            this.$bus.$emit('point_article_com',this.commentcon)
            console.log('这是文章评论的item')
        },
        showpub(){
            this.$bus.$emit('point_com_reply',this.commentcon)
            console.log('这是评论回复的item')
        },
    },
    created() {},
    mounted() {}
};
</script>
<style lang="less" scoped>
.search-icon{
    margin-right:.2rem;
    padding-top:.1rem
}
.comcontent{
    font-size:.5rem;
    color:rgb(93,86,90);
}
.van-cell__label{
    margin-top:.35rem
}
.cominfo{
    margin-top:.35rem
}
.cominfo .van-button::before{
    background-color:transparent!important;
}
/deep/.search-icon{
    font-size: .4rem
}
.gz .van-button--default{
    border:none
}
</style>